<template>
    <div id="mainUI">
      <div v-show="leftWindowFlag" class="left">
        <div class="new-chat">
          <div id="new-chat-left" @click="newChat">
            <!--<img src="../../assets/metaverse/images/加号1.png">-->
            <svg-icon icon-class="plus1" style="font-size: 20px;"/>
           <!-- <img src="../../assets/metaverse/images/历史记录.png">-->
           <!-- <span>聊天记录</span>-->
            <span>新建聊天</span>
          </div>
          <div class="new-chat-right">
            <img src="../../assets/metaverse/images/catalog.png">
          </div>
        </div>
        <div class="search-chat">
          <div class="search-key">
            <img src="../../assets/metaverse/images/searchLogo.png">
            <input placeholder="搜索提示" class="in-key">
          </div>
        </div>
        <div class="window-chat">
          <!--clickSwitch(1) -->
          <div class="chatItem" v-for="(item,index) in sessionList" :key="index" :class="item.isActive?'chat-action':''" @click="clickSessionItem(item)" :title="item.chatTitleAll">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>{{item.chatTitle}}</span>
            </div>
            <div class="chat-item-right" @click.prevent="deleteChat(item)">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog" title="删除">
            </div>

          </div>
         <!-- <div class="chatItem" :class="isTrue2?'chat-action':''"  @click="clickSwitch(2)">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>聊天2</span>
            </div>
            <div class="chat-item-right">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog">
            </div>

          </div>-->

         <!-- <div class="chatItem" :class="isTrue3?'chat-action':''"  @click="clickSwitch(3)">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>聊天3</span>
            </div>
            <div class="chat-item-right">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog">
            </div>

          </div>-->
        </div>
        <div class="operator">
          <div class="operator-wrap">
            <div class="operator-item" @click="deleteChat(currentSession)" title="清空记录">
              <img src="../../assets/metaverse/images/delete.png">
              <span>清空对话</span>
            </div>

            <div class="operator-item" @click="notOpen">
              <img src="../../assets/metaverse/images/import.png">
              <span>导入对话</span>
            </div>

            <div class="operator-item" @click="notOpen">
              <img src="../../assets/metaverse/images/export.png">
              <span>导出对话</span>
            </div>
<!--            @click="modeSwitch"-->
            <div class="operator-item" @click="notOpen">
              <img src="../../assets/metaverse/images/xhdpi.png">
              <span>{{modeName}}</span>
            </div>



          </div>

        </div>
      </div>
      <div class="center">
        <div class="leftArrowsWrap" @click="closeShowWindow(1)">
          <span v-show="leftWindowFlag">
             <img src="../../assets/metaverse/images/左箭头.png" class="leftArrows">
             <span style="font-size: 22px">l</span>
          </span>
          <span v-show="! leftWindowFlag">
             <span style="font-size: 22px">l</span>
             <img src="../../assets/metaverse/images/右箭头.png" class="leftArrows">
          </span>

        </div>
        <div class="rightArrowsWrap" @click="closeShowWindow(3)">
          <span v-show="rightWindowFlag">
             <span style="font-size: 22px">l</span>
             <img src="../../assets/metaverse/images/右箭头.png" class="leftArrows">
          </span>
          <span v-show="! rightWindowFlag">
             <img src="../../assets/metaverse/images/左箭头.png" class="leftArrows">
             <span style="font-size: 22px">l</span>
          </span>
        </div>

        <div id="chatWindowWrap" v-show="! gptWindowFlag">
          <div class="personStyle">
            <img :src="currentSession.gptDoctor">
          </div>
          <div class="flex column align-center v-align">
            <div class="chat-answer">
              <!--
              <el-button type="primary" :loading="loading" v-if="loading" class="sendStyle">加载中</el-button>
              <el-button type="primary" @click="sendChat"  v-else class="sendStyle">发送</el-button>
              -->
              <input placeholder="请输入" v-model="question" type="text">
              <img v-if="loading" :src="sendButton">
              <img :src="sendButton" v-else @click="sendChat">
            </div>
            <div style="color: #9D9DAC;padding: 10px;">重要提示 ： 请注意，与您交谈的是白医AI模型，而非真实医生</div>

          </div>
          <!--<div class="chatContentWrap">
            <el-input
              @keyup.enter.native="sendChat"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              style="font-size: 15px;font-weight: bold;"
              v-model="question">
            </el-input>

            <el-button type="primary" :loading="loading" v-if="loading" class="sendStyle">加载中</el-button>
            <el-button type="primary" @click="sendChat"  v-else class="sendStyle">发送</el-button>
            &lt;!&ndash; <input type="button" value="发送" @click="sendChat">&ndash;&gt;
            &lt;!&ndash;<select>
              <option></option>
              <option>发送历史病历</option>
              <option>发送历史诊断</option>
              <option>发送历史用药</option>
            </select>&ndash;&gt;


            &lt;!&ndash;问答区域 &ndash;&gt;
            <div id="chatAnswer">
              <div class="answerDiv" v-html="showAnswer" :class="showAnswer?'chatAnswerBottomPadding':''"></div>
            </div>

          </div>-->
        </div>
        <div id="gptWindowWrap"  v-show="gptWindowFlag">
          <div class="flex column gpt-top">
            <div class="flex v-align gpt-top-welcome">
              <img src="../../assets/metaverse/images/logo.png" style="width: 45px;height: 45px">
              <span>你好，我是白医GPT</span>
            </div>
            <div class="flex gpt-top-propagandize-wrap">
              <div class="flex column gpt-top-propagandize">
                <img src="../../assets/metaverse/images/show1.png">
                <span>国内领先技术：我们的医疗GPT模型经过深度研发和优化，拥有国内领先的生成式AI技术。它在处理医学领域的任务和语义理解方面表现出色，能够有效应对医疗数据的复杂性和多样性。
                </span>
              </div>
              <div class="flex column gpt-top-propagandize gpt-top-propagandize1">
                <img src="../../assets/metaverse/images/show2.png">
                <span>
                  全面赋能医疗健康领域：医疗GPT模型不仅仅局限于单一应用场景，它可以广泛应用于医疗领域的各个方面。无论是辅助诊断、个性化治疗规划、健康管理，还是为科研提供支持，它都能提供有力的帮助。
                </span>
              </div>
              <div class="flex column gpt-top-propagandize">
                <img src="../../assets/metaverse/images/show3.png">
                <span>
                  高质量小样本数据支持：我们深知医疗数据的稀缺和珍贵，因此我们的医疗GPT模型具备强大的学习能力，能够充分利用客户提供的高质量小样本数据，实现对模型的精细微调，从而更好地适应个性化医疗任务。
                </span>
              </div>
            </div>
          </div>
          <div class="gpt-application-scenarios">
            <div style="font-size: 1rem;margin-bottom: 0.75rem;opacity: .8;color: white">
              医疗GPT模型的应用场景
            </div>
            <ul>
              <li>
                <span>辅助诊断：为医生提供病情分析、辅助诊断和治疗建议，帮助医生更快速、准确地诊断疾病。</span>
              </li>
              <li>
                <span>个性化治疗：根据患者的独特情况，制定个性化的治疗方案和用药建议。</span>
              </li>
              <li>
                <span>健康管理：实时监测患者的生理数据，预测疾病风险，为患者提供健康管理和预防措施。</span>
              </li>
              <li>
                <span>智能问诊：为患者提供智能化的问诊服务，解答常见问题和提供初步指导。</span>
              </li>
            </ul>
          </div>
          <div class="gpt-answer flex column align-center v-align">
            <div class="flex v-align gpt-answer-int">
              <div class="dataInputWrap" :class="[inputFocus?'dataInputWrap-focus':'',question?'dataInputWrap-border':'']">
                <input v-model="question" class="dataInput" placeholder="请输入" type="text" ref="gptQuestionRef" @blur="inputFocus = false" @focus="inputFocus = true"></input>
              </div>
              <button class="btn-confirm" :title="! agreementCheckbox?'请同意隐私条款':''" :class="question?'btn-confirm-active':''" @click="mainGptChat">确  定</button>
            </div>
            <div class="flex v-align align-center">
              <el-checkbox v-model="agreementCheckbox"></el-checkbox>
              <span style="color: #86909c;font-size: 14px;margin-left: 10px;">
                勾选即代表您同意并接受<span class="service-agreement">服务协议</span>与<span class="service-agreement">隐私政策</span>
              </span>
            </div>
          </div>
        </div>

        <div id="chatAnswer">
          <div class="answerDiv" v-html="currentSession.showAnswer" :class="currentSession.showAnswer?'chatAnswerBottomPadding':''"></div>
        </div>
      </div>

      <div v-show="rightWindowFlag" class="right">
        <div class="search-chat">
          <div class="search-key">
            <img src="../../assets/metaverse/images/searchLogo.png">
            <input placeholder="搜索提示" class="in-key" type="text">
          </div>
        </div>

        <div class="database">
          <div class="database-type">

            <div class="database-anli" @click="clickConsultation">
              <!--<img src="../../assets/metaverse/images/客户案例.png">-->
              <span :class="consultationFlag?'database-active':''">医生问诊</span>
            </div>

            <div class="database-anli" @click="clickService">
              <!--<img src="../../assets/metaverse/images/个人头像.png">-->
              <span :class="! consultationFlag?'database-active':''">白医服务</span>
            </div>
          </div>
          <div id="consultation">
            <div class="operator-item" v-for="(item,index) in doctorList" :key="index">
              <div :class="item.isActive?'operator-item-doctor-active':'operator-item-doctor'" @click="clickSwitchDoctor(item)">
              <img src="../../assets/metaverse/images/个人头像.png" class="img">
              <span>{{item.name}}</span>
            </div>
            </div>

           <!-- <div class="operator-item">
              <div :class="doctorActiveFalg2?'operator-item-doctor-active':'operator-item-doctor'" @click="clickSwitchDoctor(2)">
                <img src="../../assets/metaverse/images/个人头像.png" class="img">
                <span>权教授</span>
              </div>
            </div>

            <div class="operator-item">
              <div :class="doctorActiveFalg3?'operator-item-doctor-active':'operator-item-doctor'" @click="clickSwitchDoctor(3)">
                <img src="../../assets/metaverse/images/个人头像.png" class="img">
                <span>焦教授</span>
              </div>
            </div>-->

          </div>
          <div id="service" style="display: none;">
            <div class="operator-item">
              <div class="operator-item-doctor" @click="notOpen">
                <img src="../../assets/metaverse/images/light.png" class="img">
                <span>导诊</span>
              </div>

            </div>

            <div class="operator-item">
              <div class="operator-item-doctor" @click="notOpen">
                <img src="../../assets/metaverse/images/light.png" class="img">
                <span>生成病例</span>
              </div>

            </div>

            <div class="operator-item">
              <div class="operator-item-doctor" @click="notOpen">
                <img src="../../assets/metaverse/images/light.png" class="img">
                <span>指标解读</span>
              </div>

            </div>

            <div class="operator-item">
              <div class="operator-item-doctor" @click="notOpen">
                <img src="../../assets/metaverse/images/light.png" class="img">
                <span>疾病风险预测</span>
              </div>

            </div>

            <div class="operator-item">
              <div class="operator-item-doctor" @click="notOpen">
                <img src="../../assets/metaverse/images/light.png" class="img">
                <span>心里咨询</span>
              </div>

            </div>


          </div>



        </div>



      </div>

      <el-dialog
        title="专家介绍"
        :visible.sync="dialogVisible"
        :lock-scroll="false"
        width="52%" top="10vh">
       <!-- <div v-html="doctorIntroduce" height="590px"></div>-->
        <div>
          <img :src="currentDoctor.introductionImg" width="100%" style="display: block"/>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="footer-bottom">
            <div class="footer-text">重要提示 ： 请注意，与您交谈的是白医AI模型，而非真实医生</div>
            <div>
              <el-button @click="dialogVisible = false" style="background-color: #ff976a;border: none;color: white;">取 消</el-button>
              <el-button type="primary" @click="newChatWindow" v-if="! this.chatTitle" style="background-color: rgb(72,101,255);border: none;color: white;">新 建 聊 天</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import ttutils from '@/utils/metaverse/ttutils.js'
    import { Loading } from 'element-ui';
    export default {
        name: "mainUI",
        data(){
          return {
            loadingInfo: undefined,
            isTencentSocketOpen: false,
            lineIndex: 0,
            audioChunks: [],
            tencentSocket: undefined,
            doctorAnswer: '',
            inputFocus: false,
            aaa: '',
            gptWindowFlag: true,
            leftWindowFlag: true,
            rightWindowFlag: true,
            agreementCheckbox: true,
            dialogVisible: false,
            chatTitle: '',
            chatTitleAll: '',
            doctorIntroduce:'',
            question: '',
            chatLock: false,
            loading: false,
            answer: '',
            showAnswer: '',
            history: '',
            historyList: [],
            isTrue1: true,
            isTrue2: false,
            isTrue3: false,
            consultationFlag: true,
            doctorImg: require("@/assets/metaverse/images/huanglaoshi.png"),
            doctorChatImg: require("@/assets/metaverse/images/huang-active.gif"),
            sendButton: require("@/assets/metaverse/images/sendMessage.png"),
            // modeName: '灰色模式',
            modeName: '深色模式',
            doctorActiveFalg1: false,
            doctorActiveFalg2: false,
            doctorActiveFalg3: false,
            currentDoctor: {},
            sessionList:[],
            currentSession: {},
            doctorList:[
              {
                name: '黄教授',
                isActive: false,
                doctorImg: require("@/assets/metaverse/images/huanglaoshi.png"),
                doctorChatImg: require("@/assets/metaverse/images/huang-active.gif"),
                introductionImg: require("@/assets/metaverse/images/huang-introduce.jpg"),
              },
              {
                name: '权教授',
                isActive: false,
                doctorImg: require("@/assets/metaverse/images/quan.png"),
                doctorChatImg: require("@/assets/metaverse/images/quan.png"),
                introductionImg: require("@/assets/metaverse/images/quan-introduce.jpg"),
              },
              {
                name: '焦教授',
                isActive: false,
                doctorImg: require("@/assets/metaverse/images/jiao.png"),
                doctorChatImg: require("@/assets/metaverse/images/jiao.png"),
                introductionImg: require("@/assets/metaverse/images/jiao-introduce.jpg"),
              },

            ]
          }
        },
        methods:{
          // loadingInfo
          startLoading(){  // 使用Element loading-start 方法
            this.loadingInfo = Loading.service({
              lock: true,
              text: '加载中……',
              background: 'rgba(0, 0, 0, 0.7)'
            });
          },
          calcInputStyle(){ // return [inputFocus?'dataInputWrap-focus':'',question?'dataInputWrap-border':'']
            console.log("inputFocus",this.inputFocus);
            if(this.inputFocus){
              return 'dataInputWrap-focus'
            }else{
              if(this.question){ // 存在值
                return 'dataInputWrap-border'
              }else{
                return 'dataInputWrap-focus'
              }
            }

          },
          closeShowWindow(index){
            if(index == 1){
              // 关闭左侧
              this.leftWindowFlag = ! this.leftWindowFlag
            }else if(index ==3){
              // 关闭右侧
              this.rightWindowFlag = ! this.rightWindowFlag
            }
          },
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          },
          notOpen(){
            this.$message({
              message: '该功能只对白医会员开放！！！',
              type: 'warning'
            });
          },
          newChat(){
            if(this.loading){
              return this.msgSuccess("当前正在聊天中....");
            }
            // 验证当前是客服还是医生
            this.gptWindowFlag = false
            let session = {// 创建会话
              id: this.sessionList.length,/*会话id 数组的索引值*/
              type: this.currentDoctor?'1':'0',  /*0 默认医生 选择的医生*/
              gptDoctor: this.currentDoctor?this.currentDoctor.doctorImg:this.doctorList[0].doctorImg, /*显示医生形象 默认是不说话的医生形象*/
             /* doctorImg: this.doctorImg,
              doctorChatImg: this.doctorChatImg,*/
              doctor: this.currentDoctor?this.currentDoctor:this.doctorList[0],
              isActive: true, /*窗口是否打开*/
              historyList:[],/*历史记录集合*/
              history:'',/*当前问话的回答记录 */
              background:'', /*会话场景*/
              chatTitleAll:"",/*会话标题*/
              chatTitle: "", /*会话标题 截取后的*/
              answer: "",
              showAnswer: "",
            }
            this.currentSession.isActive = false;
            // 添加到会话中
            this.sessionList.push(session);
            // 显示会话
            this.currentSession = session
            console.log("当前会话",this.currentSession,this.gptWindowFlag);
          },
          newChatWindow(){
            this.dialogVisible = false
            this.newChat();//新建会话
          },
          clickSessionItem(item){
            if(this.loading){
              return;
            }
            if(this.currentSession.isActive){
              this.currentSession.isActive = false
            }
            item.isActive = true
            this.currentSession = item
          },
          deleteChat(item){ // 删除聊天
            console.log("聊天窗口",this.sessionList);
            this.$confirm('此操作将永久删除该聊天, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              lockScroll: false,
              type: 'warning'
            }).then(() => {
              /*this.chatTitle = "";
              this.chatTitleAll = "";
              this.answer = ""
              this.showAnswer = ""
              this.historyList = []*/
              let itemIndex = 0;
              for (let i=0; i<this.sessionList.length; i++){
                // 删除会话
                if (this.sessionList[i] == item){
                  this.sessionList.splice(i, 1)
                }
                // 改变当前会话
                if (item == this.currentSession){
                  itemIndex = i-1;
                  if(itemIndex < 0){
                    itemIndex = 0;
                  }
                }
              }
              // 验证当前会话是否是删除的会话
              if (item == this.currentSession){
                if(this.sessionList.length>0){
                  this.currentSession = this.sessionList[itemIndex];
                  this.currentSession.isActive = true
                }else{
                  this.currentSession = {}
                }
              }
              /*console.log("当前窗口",this.currentSession);
              console.log("聊天窗口",this.sessionList);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });*/
            }).catch(() => {
              /*this.$message({
                type: 'info',
                message: '已取消删除'
              });*/
            });
          },
          modeSwitch(){
            if(this.modeName == '灰色模式'){
              this.modeName = "深色模式";
              document.getElementById("mainUI").style.backgroundColor = "gray";
              document.getElementById("mainUI").style.color="white";
              let inKey = document.getElementsByClassName("in-key")
              // rgba(145,147,156,0.7)
              document.getElementById("chatAnswer").style.backgroundColor="rgba(230,230,230,0.7)"
              document.getElementById("chatAnswer").style.color = 'gray'
              for(let k of inKey){
                k.style.backgroundColor="gray"
                k.style.color="white"
              }
            }else{
              this.modeName = "灰色模式";
              document.getElementById("mainUI").style.backgroundColor = "#1E2332";
              document.getElementById("mainUI").style.color="white";
              let inKey = document.getElementsByClassName("in-key")
              document.getElementById("chatAnswer").style.backgroundColor="rgba(145,147,156,0.7)"
              document.getElementById("chatAnswer").style.color = 'white'
              for(let k of inKey){
                k.style.backgroundColor="#1E2332"
                k.style.color="white"
              }
            }
          },
          clickConsultation(){
            this.consultationFlag = true;
            document.getElementById("service").style.display="none";
            document.getElementById("consultation").style.display="block";
          },
          clickService(){
            this.consultationFlag = false;
            document.getElementById("service").style.display="block";
            document.getElementById("consultation").style.display="none";
          },
          clickSwitch(num){
            this.showAnswer = this.answer
            if(num == 1){
              this.isTrue1 = true;
              this.isTrue2 = false;
              this.isTrue3 = false;
              this.doctorImg = require("@/assets/metaverse/images/huanglaoshi.png");
            }else if(num == 2){
              this.isTrue1 = false;
              this.isTrue2 = true;
              this.isTrue3 = false;
              this.doctorImg = require("@/assets/metaverse/images/quan.png");
            }else if(num == 3){
              this.isTrue1 = false;
              this.isTrue2 = false;
              this.isTrue3 = true;
              this.doctorImg = require("@/assets/metaverse/images/jiao.png");
            }
          },
          clickSwitchDoctor(item){
            // 遍历修改状态
            this.doctorList = this.doctorList.map(arr=>{
              if(arr == item){
                arr.isActive = true;
              }else {
                arr.isActive = false
              }
              return arr;
            })
            this.currentDoctor = item
            this.dialogVisible = true
            /*if(num == 1){
              this.doctorActiveFalg1 = true;
              this.doctorActiveFalg2 = false;
              this.doctorActiveFalg3 = false;
              this.doctorImg = require("@/assets/metaverse/images/huanglaoshi.png");
              /!*this.doctorIntroduce = '<p style="margin: 0px;line-height: 30px;font-weight: bold;">【黄海燕】</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">吉林大学第一医院</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">神经肿瘤外科教授</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">主任医师，博士生导师，医学博士</p>'+
                                     '<p style="margin: 0px;line-height: 2 25px;">毕业于白求恩医科大学，从事神经外科工作近30年，擅长脑深部肿瘤、小儿先天性颅脑及脊髓疾病等神经系统疾病的诊断与治疗</p>'+
                                     '<p style="margin: 0px;line-height: 25px;font-weight: bold;">【学术成就】</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">发表SCI学术论文二十余篇</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">中华核心期刊五十余篇</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">国家发明专利五项</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">吉林省政府专利专项奖</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">主持和参与国家及省级科研项目十余项</p>'+
                                     '<p style="margin: 0px;line-height: 25px;">获得医疗成果奖三项</p>'*!/
              this.aaa = require("@/assets/metaverse/images/简介-黄老师.jpg");
            }else if(num == 2){
              this.doctorActiveFalg1 = false;
              this.doctorActiveFalg2 = true;
              this.doctorActiveFalg3 = false;
              this.doctorImg = require("@/assets/metaverse/images/quan.png");
              this.doctorIntroduce = '<p style="margin: 0px;line-height: 30px;">【权玉芬】</p>'+
                '<p style="margin: 0px;line-height: 30px;">吉林大学第一医院内科专家</p>'+
                '<p style="margin: 0px;line-height: 25px;">毕业于白求恩医科大学</p>'+
                '<p style="margin: 0px;line-height: 25px;">37年的内科临床工作经验，擅长大内科诊疗，在冠心病、呼吸道疾病诊疗方面有丰富经验</p>'+
                '<p style="margin: 0px;line-height: 25px;">1992年赴韩国留学，在内科诊疗方面有着卓越建树</p>'+
                '<p style="margin: 0px;line-height: 30px;">【学术成就】</p>'+
                '<p style="margin: 0px;line-height: 25px;">大内科诊疗</p>'+
                '<p style="margin: 0px;line-height: 25px;">冠心病诊疗</p>'+
                '<p style="margin: 0px;line-height: 25px;">呼吸道疾病诊疗</p>'
            }else if(num == 3){
              this.doctorActiveFalg1 = false;
              this.doctorActiveFalg2 = false;
              this.doctorActiveFalg3 = true;
              this.doctorImg = require("@/assets/metaverse/images/jiao.png");
              this.doctorIntroduce = '<p style="margin: 0px;line-height: 30px;">【焦建军】</p>'+
                '<p style="margin: 0px;line-height: 30px;">中医科副主任医师</p>'+
                '<p style="margin: 0px;line-height: 30px;">全国肿瘤介入专业委员会常务委员</p>'+
                '<p style="margin: 0px;line-height: 30px;">长春人文学院、光华学院客座教授</p>'+
                '<p style="margin: 0px;line-height: 30px;">锡伯中医仁德堂第八代传承人</p>'+
                '<p style="margin: 0px;line-height: 30px;">从事中医工作30余年，申请药食同源中药茶专利四项、药酒专利一项</p>'+
                '<p style="margin: 0px;line-height: 30px;">独创健骨康复法、内服外贴中药茶、膏剂，针对颈椎、腰椎、糖尿病、痛风等有显著疗效</p>'+
                '<p style="margin: 0px;line-height: 30px;">【学术成就】</p>'+
                '<p style="margin: 0px;line-height: 30px;">吉林省针灸学会特种针法专业委员会专家委员</p>'+
                '<p style="margin: 0px;line-height: 30px;">长春人文学院福祉学院客座教授</p>'+
                '<p style="margin: 0px;line-height: 30px;">光华学院客座教授</p>'
            }
            this.dialogVisible = true
            // this.showAnswer = this.doctorIntroduce*/
          },
          mainGptChat(){
            this.newChat()
            this.sendChat()
          },
          sendChat(){
            this.doctorAnswer = '' // 设置回答内容为空
            // 只能一个窗口聊天
            if(! (this.question && this.question.trim() != '' && this.currentSession.gptDoctor && !this.loading)){
              return;
            }
            this.startLoading();
            this.loading = true
            //console.log("发送数据了",this.question)
            let question = this.question
            this.question = "";
            let data = {
              knowledge_base_id:"byyl",
              question:question,
              history: this.currentSession.historyList
            }
            //console.log("传递给GPT的数据是：",data);
            this.sendMsg(data,ev=>{
              //console.log(ev.data)
              if(ev.data.indexOf("question") == -1){ // 回答问题内容
                this.doctorAnswer = this.doctorAnswer + ev.data;
                this.currentSession.answer += ev.data
                this.currentSession.history += ev.data
                // this.currentSession.showAnswer = this.currentSession.answer
              }
              if(ev.data.indexOf("question") !== -1){
                let d = JSON.parse(ev.data);
                if(typeof d == 'object' && d){
                  // 是对象类型
                  if(d.flag == "start"){
                    // this.currentSession.gptDoctor = this.currentSession.doctor.doctorChatImg;
                    this.currentSession.answer = this.currentSession.answer +"<br>"+"问："+d.question+"<br>";
                    this.currentSession.history = "";
                    this.currentSession.showAnswer = this.currentSession.answer
                    if(this.currentSession.chatTitle.replace(' ','')==''){
                      this.currentSession.chatTitleAll = d.question
                      if(d.question.length>6){
                        this.currentSession.chatTitle = d.question.substring(0,6) + '...'
                      }else{
                        this.currentSession.chatTitle = d.question
                      }
                    }
                  }
                  if(d.flag == "end"){
                    // this.currentSession.gptDoctor =  this.currentSession.doctor.doctorImg
                    // this.loading = false
                    let historyData = [];
                    historyData[0] = d.question
                    historyData[1] = this.currentSession.history
                    // 验证数组长度是否为10  如果为10  需要删除第一个值
                    if(this.historyList.length >= 10){
                      this.currentSession.historyList.shift(); // 删除第一个位置上的值  只记住最近的10条数据
                      this.currentSession.historyList.push(historyData)
                    }else{
                      this.currentSession.historyList.push(historyData)
                    }
                    // 开始说话呗
                    this.startTencentSocket(this.currentSession.history);

                  }
                }
              }
            })
          },
          startTencentSocket(message){
            console.log("开始说话了",message)
            if(! this.isTencentSocketOpen){
              let url = "wss://" + ttutils.getUrl(message);
              this.tencentSocket = new WebSocket(url)
              this.tencentSocket.onopen = ()=>{
                console.log('tencentSocket连接成功')
              }

              this.tencentSocket.onmessage = (ev)=>{
                console.log(ev,'tencentSocket连接正常')
                let data = ev.data
                console.log(ev.data,'数据是')
                if (!this.checkJSON(data)) {
                  // 将接收到的二进制数据片段添加到数组中、
                  // #ifdef H5
                  this.audioChunks.push(data);
                  // #endif
                  // #ifdef APP-PLUS
                  // 将音频数据片段存储到数组中

                  // #endif
                } else {
                  const data1 = JSON.parse(data)
                  if (data1.code == 0 && data1.final == 1) {
                    this.loadingInfo.close();
                    this.stopTencentSocket()
                    this.currentSession.gptDoctor = this.currentSession.doctor.doctorChatImg;
                    this.currentSession.showAnswer += "答："
                    // #ifdef H5
                    // 合并数组中的二进制数据片段
                    console.log("二进制片段",this.audioChunks);
                    const concatenatedAudio = new Blob(this.audioChunks);
                    // 创建一个新的 Blob URL
                    const objectURL = URL.createObjectURL(concatenatedAudio);

                    // 创建一个新的音频元素
                    const audioElement = new Audio();
                    audioElement.src = objectURL;
                    // 播放音频
                    // audioElement.play();
                    audioElement.addEventListener('ended', this.onAudioEnded);
                    audioElement.addEventListener("loadedmetadata", () => {
                      const lineDuration = audioElement.duration / this.currentSession.history.length;
                      audioElement.play(); // 开始播放音频
                      this.lineIndex = 0; // 重置行索引
                      this.timer = setInterval(() => {
                        if (this.lineIndex < this.currentSession.history.length) {
                          this.currentSession.showAnswer += this.currentSession.history[this.lineIndex];
                          this.lineIndex++;
                        } else {
                          // 当所有行都显示完毕后，清除定时器
                          clearInterval(this.timer);
                        }
                      }, lineDuration * 1000); // 控制每行文字的显示间隔时间，单位为毫秒
                    });

                    audioElement.addEventListener("play", () => {
                      // this.isStartWS = true
                      console.log("开始播放视频");
                    });

                    audioElement.addEventListener("error", (error) => {
                      // this.isStartWS = false
                      console.log("播放视频失败");
                    });
                    // #endif
                    // #ifdef APP-PLUS

                    // #endif
                  }
                }

              }

              this.tencentSocket.onerror = ()=>{
                console.log('tencentSocket服务出错了+++onerror');
                this.stopTencentSocket();
              }

              this.tencentSocket.onclose = ()=>{
                console.log('tencentSocket服务关闭了+++onclose');
              }

            }
          },
          checkJSON(option) {
            try {
              return JSON.parse(option)
            } catch (e) {
              return false
            }
          },
          stopTencentSocket(){
            if (this.isTencentSocketOpen) {
              this.socket2.close();
            }
          },
          onAudioEnded(event) {
            // 当语音结束的时候,代表本次聊天结束
            // this.$refs.chatSubmit.setCurrChatStatus(false);
            // this.isStartWS = false
            this.currentSession.gptDoctor =  this.currentSession.doctor.doctorImg // 改变医生头像行为
            this.loading = false
            this.audioChunks = []
            const audioElement = event.target;
            audioElement.removeEventListener('ended', this.onAudioEnded);
          },
        },
      watch: {
          question(newValue,oldValue){
            // item1为新值，item2为旧值
            if(newValue){
              this.sendButton = require("@/assets/metaverse/images/发送-active.png")
            }else{
              this.sendButton = require("@/assets/metaverse/images/sendMessage.png")
            }
          },
          sessionList(newValue,oldValue){
            if(newValue.length==0){
              this.gptWindowFlag = true
              // 初始化医生问诊
              this.doctorList = this.doctorList.map(arr=>{
                arr.isActive = false
                return arr;
              })
              this.currentDoctor = this.doctorList[0]
              this.currentSession = {}
            }
          }
        },
      created(){
          this.currentDoctor = this.doctorList[0]
      }
    }
</script>

<style scoped>
.chat-answer{
  width: 820px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.chat-answer input[type=text]::placeholder{
  color: #9D9DAC;
  cursor: pointer;
}
.chat-answer input{
  font-size: 16px;
  outline: none;
  border: none;
  color: #9D9DAC;
  width: 750px;
}
.chat-answer img{
  cursor: pointer;
}
input[type=checkbox]{
  cursor: pointer;
  position: relative;
  width: 15px;
  height: 15px;
  font-size: 14px;
}

input[type=checkbox]::after{
  position: absolute;
  top: 0;
  background-color: #1E2332;
  color: #000;
  width: 15px;
  height: 15px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
}

input[type=checkbox]:checked::after{
  content: "✓";
  font-size: 12px;
  font-weight: bold;
  background: #4058D6;
  color: white;
}

input{
  outline: none;
}
.dataInput{
  border: none;
  background: #1E2332;
  padding-left: 10px;
  box-sizing: border-box;
  color: white;
  font-size: 15px;
  width: 505px;
  display: inline-block;
}
.dataInput[type=text]::placeholder{
  color: #535A5D;
  cursor: pointer;
}
.dataInputWrap{
  display: inline-block;
  width: 508px;
  height: 44px;
  display: flex;
  align-items: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.btn-confirm{
  border: none;
  outline: none;
  background: #42475D;
  font-size: 16px;
  color: #86909c;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 48px;
  width: 70px;
}
.btn-confirm-active{
  background: #4865FF;
  color: white;
}
.dataInputWrap:hover{
  border: 1px solid #6C87E3;
}
.dataInputWrap-focus{
  border: 1px solid #6C87E3;
}
.dataInputWrap-border{
  border: 1px solid #5C6879;
}
ul{
  padding: 0px 17px 0px;
  list-style: disc;
  color: #7796FF;
}
ul li{
  padding: 5px 0px;
}
ul span{
  color: white;
  opacity: .7;
  font-size: 13px;
  margin-bottom: 0.5rem;
  line-height: 1rem;
}
.gpt-answer{
  flex: 1;
  margin-top: 0px;
}
.gpt-answer-int{
  width: 580px;
  background: #1E2332;
  height: 50px;
  border-radius: 10px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.marginCenter{
  margin: auto;
}
.service-agreement{
  color: #6C87E3;
  font-size: 14px;
}
.gpt-answer-wrap{

}
.gpt-application-scenarios{
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 30px;
  padding: 0px 40px;
  flex: 1;
}
.gpt-top{
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 9%;
  flex: 1;
}
.gpt-top-welcome img{
  width: 50px;
  height: 50px;
}
.gpt-top-welcome span{
  padding-left: 20px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  font-family: __Inter_0ec1f4,__Inter_Fallback_0ec1f4;
  font-style: normal;
}
.gpt-top-propagandize-wrap{
  margin-top: 30px;
  background: #373D50;
  padding: 30px;
  border-radius: 10px;
}
.gpt-top-propagandize img{
  width: 40px;
  height: 40px;
}
.gpt-top-propagandize span{
  font-size: .875rem;
  line-height: 24px;
  margin-top: 17px;
}

.gpt-top-propagandize1 {
  margin: 0 1.25rem;
}

.flex{
  display: flex;
}
.column{
  flex-direction: column;
}
.row{
  flex-direction: row;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.align-center{
  justify-content: center;
}

.bottom-text{
  color: #ff0000;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1rem;
  margin-top: 15px;
}

.v-align{
  align-items: center;
}
.pStyle{
  line-height: 30px;
}
/* 弹出层设置背景色  头部 */
/deep/ .el-dialog__body {
  background-color: rgb(30,35,50);
  border: 0;
  color: white;
  font-size: 16px;
  padding: 0px;
}
/deep/ .el-dialog__header{
  background-color: rgb(52,57,74);
}
/deep/ .el-dialog__title{
  color: white;
}
/deep/ .el-dialog__body {
  background-color: rgb(30,35,50);
  border: 0;
  color: white;
  padding: 0px;
  margin: 0px;
}
/deep/ .el-dialog__footer{
  background-color: rgb(52,57,74);
  padding: 15px 20px 15px 20px;
}
/deep/ .el-dialog__wrapper{
  overflow: hidden !important;
}

::-webkit-input-placeholder {
  /*color: #808080;*/
  color: ghostwhite;
}
#chatAnswer{
  position: relative;
  display: flex;
  justify-content: center;
}
.answerDiv{
  position: absolute;
  background: rgba(145,147,156,0.7);
  width: 820px;
  max-height: 700px;
  /*height: 400px;*/
  bottom: 200px;
  color: white;
  overflow-y: auto;
  border-radius: 10px;
  padding: 0px 10px;
}
.chatAnswerBottomPadding{
  padding-bottom: 20px;
}
.sendStyle{
  background: #4058D6;font-size: 25px;letter-spacing: 10px;
}
#mainUI{
  height: 100%;
  display: flex;
  flex-direction: row;
  color: white;
  background: #1E2332;
}
.left{
  flex: 13;
  display: flex;
  flex-direction: column;
}

.left .new-chat{
  flex: 1;
  display: flex;
  flex-direction: row;
}

#new-chat-left{
  height: 50px;
  width: 70%;
  margin: 10px 5px 10px 5px;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
  cursor: pointer;
}
#new-chat-left span{
  margin-left: 10px;
}
.new-chat-right{
  height: 50px;
  width: 30%;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
  margin: 10px 5px 10px 5px;
  cursor: pointer;
}
.left .search-chat{
  flex: 1;
}

.search-key{
  height: 50px;
  margin: 10px 5px 10px 5px;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.in-key{
  width: 55%;
  height: 30px;
  margin-left: 10px;
  border: none;
  background: #1E2332;
  color: white;
  font-size: 15px;
}
.left .window-chat{
  flex: 8;
}
.window-chat .chatItem{
  height: 50px;
  margin: 10px 5px 10px 5px;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}
.chat-action{
  background: #4058D6;
}
.chat-item-left{
  height: 50px;
  display: flex;
  justify-content:center;
  align-items: center;
  flex: 2;
}
.chat-item-left .sessionLog{

}
.chat-item-left span{
  margin-left: 20px;
}
.chat-item-right{
  height: 50px;
  display: flex;
  justify-content:center;
  align-items: center;
  flex: 1;
}

.left .operator{
  flex: 3;
}

.operator .operator-wrap{
  height: 100%;
  width: 95%;
  border-top: 1px solid #4B4F5B;
  display: flex;
  flex-direction: column;
}
.operator-item{
  margin-top: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.operator-item-doctor{
  width: 60%;
  display: flex;
  cursor: pointer;
  margin: auto;
  padding: 5px;
  border-radius: 5px;
}
.operator-item-doctor .img{
  margin-left: 0px;
}
.operator-item-doctor-active > .img{
  margin-left: 0px;
}
.operator-item-doctor-active{
  width: 60%;
  display: flex;
  cursor: pointer;
  margin: auto;
  padding: 5px;
  border-radius: 5px;
  background: #4058D6;
}
.operator-item img{
  margin-left: 45px;
}
.operator-item span{
  margin-left: 15px;
}
.center{
  flex: 70;
  background: #2B3041;
  position: relative;
}
.leftArrows{
  height: 16px;
  width: 16px;
}
.rightArrows{
  height: 15px;
  width: 20px;
}
.lineArrows{
  height: 15px;
  width: 20px;
}
.leftArrowsWrap{
  position: absolute;
  left: 10px;
  top: 15px;
  width: 200px;
  z-index: 5;
  display: inline-block;
  cursor: pointer;
}
.rightArrowsWrap{
  position: absolute;
  right: 10px;
  top: 15px;
  width: 200px;
  text-align: right;
  z-index: 5;
  display: inline-block;
  cursor: pointer;
}
#gptWindowWrap{
  height: 100%;
  display:flex;
  flex-flow: column; /*垂直排列*/
  position: relative;
}


#chatWindowWrap{
  height: 100%;
  display:block;
  flex-flow: column; /*垂直排列*/
  justify-content: space-between;/*两端对齐*/
  background: url("../../assets/metaverse/images/背景5.jpg");
  background-size: 100% 100%;
}
.personStyle{
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 10;
  height: 80%;
}
.personStyle img{
  width: 25%;
}
.chatContentWrap{
  flex: 1;
  display: flex;
  flex-direction: row;
}
.right{
  flex: 13;
}
.database-type{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
}
.database-active{
  color: #6A92FF;
  padding-bottom: 2px;
  border-bottom: 1px solid #6A92FF;
}
.database-type .database-anli{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  cursor: pointer;
}
  .footer-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

.footer-text{
  font-size: 1rem;
  color: white;
  opacity: .5;
}

</style>
